<template>
  <div>
    <Header title="关于社区" :xiao="xiao" :titledi="titledi" style="width: 94%;margin-left:3%;" />
    <div class="box"></div>
    <div class="she">
      <img src="../assets/image/nothing.png" alt="">
      <p>version</p>
      <div class="list">
        <p @click="shequ">关于社区<span class="da">&gt;</span></p>
      </div>
    </div>
  </div>
</template>

<script>
import Header from '@/components/common/Header.vue';
export default {
  components: { Header },
  data() {
    return {
      //控制小于号的显示隐藏
      xiao: true,
      // 控制title字段的位置
      titledi: '145px',
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  height: 44px;
}

.she {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;

  img {
    width: 150px;
    height: 150px;
    border: 1px solid #ececec;
    border-radius: 50px;
    ;
  }

  p {
    font-size: 14px;
    color: #6c757d;
    margin-top: 10px;
  }

  .list {
    p {
      font-size: 16px;
      margin-bottom: 28px;

      span {
        float: right;
        color: #999;
        font-size: 14px;
      }

      .da {
        font-size: 20px;
        color: rgb(187, 187, 187);
      }
    }

    button {
      width: 100%;
      line-height: 40px;
      font-size: 18px;
      border-radius: 20px;
      border: none;
      background-color: #FF4A6A;
      color: #fff;
    }
  }
}
</style>